<template>
    <div class="container mx-auto" style=" width: 65vw;">
        <div>
            <div>
                <h1 class="navTitle " style="margin: 40px 0 0 0;font-size: 18px;">县政府领导</h1>
                <div class="line mx-auto" style=" width: 66vw; margin-top: 1vh;"></div>
            </div>
            <PhotoWall :people="people" />
        </div>
        <div>
            <div>
                <h1 class="navTitle " style="margin: 40px 0 0 0;font-size: 18px;">时政要闻</h1>
                <div class="line mx-auto" style=" width: 66vw; margin: 2vh 0;"></div>
            </div>
            <el-row :gutter="35">
                <el-col :span="8">
                    <div style=" height: 50px;line-height: 50px;padding-left: 20px;background-color: #1e50ae;">
                        <span style="margin-right: 10vw;font-size: 17px;color: #ffffff;">政务要闻</span>
                        <nuxt-link>
                            <el-button :icon="ElIconArrowRight" circle size="small" />
                        </nuxt-link>
                    </div>

                    <ul class="mt-2 mb-6">
                        <li v-for="(item, index) in news.slice(0, 6)" :key="index" style="padding-left: 0.5vw;">
                            <nuxt-link class="flex  content custom-link">
                                <span class="content flex-1" style="flex:1.2">{{ item.title }}</span>
                                <span class="flex-1 pl-4">{{ item.time }}</span>
                            </nuxt-link>
                        </li>
                    </ul>
                    <div style=" height: 50px;line-height: 50px;padding-left: 20px;background-color: #1e50ae;">
                        <span style="margin-right: 10vw;font-size: 17px;color: #ffffff;">省政府“青海政务督查”微信公众号上</span>
                    </div>
                    <div>
                        <img src="/assets/images/ducha.png" style="width:100%;height: 280px;">
                       
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="mt-1 flex flex-col">
                        <div class="flex-1">
                            <h1 class="navTitle">
                                <span style="margin-right: 360px;">领导讲话</span>
                                <nuxt-link class="custom-link" to="/column/invest">
                                    <button style="color:#000000">MORE</button>
                                </nuxt-link>
                            </h1>
                            <div class="line"></div>
                            <ul>
                                <li v-for="(item, index) in departmentWork.slice(0, 6)" :key="index"
                                    style="padding-left: 0.5vw;">
                                    <nuxt-link class="flex   content custom-link">
                                        <span class=" flex-2 content">{{ item.title }}</span>
                                        <span class="flex-1 pl-20">{{ item.time }}</span>
                                    </nuxt-link>
                                </li>
                            </ul>
                        </div>
                        <div class="flex-1 mt-8">
                            <h1 class="navTitle ">
                                <span style="margin-right: 360px;">媒体报道</span>
                                <nuxt-link class="custom-link">
                                    <button style="color:#000000">MORE</button>
                                </nuxt-link>
                            </h1>
                            <div class="line"></div>
                            <ul>
                                <li v-for="(item, index) in townshipNews.slice(0, 6)" :key="index"
                                    style="padding-left: 0.5vw;">
                                    <nuxt-link class="flex flex-2 content custom-link">
                                        <span class="content flex-2">{{ item.title }}</span>
                                        <span class="flex-1 pl-20">{{ item.time }}</span>
                                    </nuxt-link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">

const people = [
    {
        photo: '/assets/images/person1.png',
        name: '董峰',
        title: '县委副书记, 县人民政府县长'
    },
    {
        photo: '/assets/images/person2.png',
        name: '霍龙',
        title: '县委副书记, 县人民政府副县长（挂职）'
    },
    {
        photo: '/assets/images/person3.png',
        name: '袁渊',
        title: '县委常委, 县人民政府副县长'
    },
    {
        photo: '/assets/images/person4.png',
        name: '马海云',
        title: '县人民政府副县长'
    },
    {
        photo: '/assets/images/person5.png',
        name: '李怡青',
        title: '县人民政府副县长'
    },
    {
        photo: '/assets/images/person6.png',
        name: '周豪才仁',
        title: '县人民政府副县长'
    },
    {
        photo: '/assets/images/person7.png',
        name: '唐锋',
        title: '县人民政府副县长'
    },
    // 添加更多人物信息
]
const news = ref(
    [
        {
            title: '习近平总书记关切事｜擦亮高原蓝宝石——青海湖保护纪事',
            time: '2024-06-08'
        },
        {
            title: '湟源县开展高考保障监督检查工作',
            time: '2024-06-05'
        },
        {
            title: '湟源县各学校形式多样庆祝“六一”国际儿童',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },

    ])
const recentNews = ref(
    [
        {
            title: '关爱赋能助成长 携手同行向未来',
            time: '2016-10-09'
        },
        {
            title: '发挥政协优势 助推未诉先办',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
    ])
const townshipNews = ref(
    [
        {
            title: '【和平乡】打造“党建微网格15分钟服务圈” 实现服务群众“零距离”',
            time: '2024-05-30'
        },
        {
            title: '【东峡乡】法律宣传精彩纷呈点亮群众美好生活',
            time: '2024-05-30'
        },
        {
            title: '【大华镇】驻村干部办实事 爱心助残解民忧',
            time: '2024-05-29'
        },
        {
            title: '【寺寨乡】惠民政策进村庄 服务群众“零距离”',
            time: '2024-05-29'
        },
        {
            title: '【寺寨乡】惠民政策进村庄 服务群众“零距离”',
            time: '2024-05-29'
        },
        {
            title: '【寺寨乡】惠民政策进村庄 服务群众“零距离”',
            time: '2024-05-29'
        },
    ])
const departmentWork = ref(
    [
        {
            title: '【县检察院】“三抓三促”提升机关党建实效',
            time: '2024-05-30'
        },
        {
            title: '【县公安局】刑侦大队联合城关中心派出所开展防范电信网络诈骗进校园宣传活动',
            time: '2024-05-28'
        },
        {
            title: '【县民政局】反邪不停歇 聚力筑平安',
            time: '2024-05-27'
        },
        {
            title: '【县公安局】打好“三战”筑牢 安全生产防线',
            time: '2024-05-23'
        },
        {
            title: '【县检察院】“四抓四促”提升机关党建实效',
            time: '2024-05-21'
        },
        {
            title: '【县检察院】“四抓四促”提升机关党建实效',
            time: '2024-05-21'
        },


    ]
)
const slides = ref([
    { image: '/assets/images/huangshan.png', text: '纪念“黄山谈话”30周年系列活动' },
    { image: '/assets/images/huangshan2.png', text: '纪念“黄山谈话”30周年系列活动' },
    { image: '/assets/images/glg.png', text: 'GLG农产品深加工高科产业园首批设备运抵' },
    { image: '/assets/images/huaibei2.png', text: '淮北参观学习' },
    { image: '/assets/images/glg2.png', text: 'GLG农产品深加工高科产业园首批设备运抵' },
    { image: '/assets/images/leader.png', text: '全国工商联、农业部、安徽省工商联领导' },
    { image: '/assets/images/huaibei3.png', text: '淮北参观学习' },
    { image: '/assets/images/huaibei4.png', text: '淮北参观学习' },
]);
const swiper = ref([
    {
        src: '/assets/images/swiper1.png',
        title: '湟源县开展高考保障监督检查工作'
    },
    {
        src: '/assets/images/swiper2.png',
        title: '湟源县各学校形式多样庆祝“六一”国际儿童'
    },
    {
        src: '/assets/images/swiper3.png',
        title: '关爱赋能助成长 携手同行向未来'
    },
    {
        src: '/assets/images/swiper4.png',
        title: '发挥政协优势 助推未诉先办'
    },
])
const pic = ref([
    {
        src: '/assets/images/huaibei.png',
        title: '纪念“黄山谈话”30周年系列活动'
    },
    {
        src: '/assets/images/huangshan.png',
        title: '淮北参观学习'
    },
])
</script>

<style scoped lang="scss">
.container {
    ul {
        li {
            height: 4vh;
            line-height: 4vh;
            padding-left: 2vw;
            background-color: #f6f6f6;
            border-bottom: 1px dashed #d9d9d9;
            // display: flex;
        }
    }
}
</style>